import { data } from "browserslist";
import React, {
  Component,
  forwardRef,
  useRef,
  useImperativeHandle,
  useEffect,
} from "react";

import { create } from "zustand";
const countStore = (set) => {
  return {
    count: 2,
    name: "zs",
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  };
};
const listStore = (set) => {
  return {
    dataList: [],
    fetchData: () => {
      /* 异步模式 */
      setTimeout(() => {
        set({
          dataList: [
            { name: "zs", age: "13" },
            { name: "ls", age: "19" },
          ],
        });
      }, 1000);
    },
  };
};
const useStore = create((...a) => {
  return {
    ...countStore(...a),
    ...listStore(...a),
  }
});
export default function UseZustand() {
  const { count, increment, decrement, name, fetchData, dataList } = useStore();
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      <h1>zustand的使用</h1>
      <p>{count}</p>
      <p>{name}</p>
      <button onClick={increment}>count++</button>
      <button onClick={decrement}>count--</button>
      <p>接口数据：</p>
      {dataList.map((item) => {
        return (
          <div key={item.age}>
            {item.name}
            {item.age}
          </div>
        );
      })}
    </div>
  );
}
